<template>
	<view class="app-message">
		<UniNavBar :statusBar="true" leftIcon="back" :title="i18n.message" @clickLeft="tapNavLeft" :border="false"></UniNavBar>
		<view class="content">
			<block v-for="(item,index) in list" :key="index">
				<view class="li" @tap.stop="getNotic(item)">
					<image src="../../static/imgs/message.png"></image>
					<view class="__content">
						<view class="title">{{item.title}}</view>
						<view class="txt" v-html="item.content"></view>
					</view>
				</view>
			</block>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import UniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import Load from '../../components/common/load.vue';
	import {pageback, fetch} from "@/common/js/util.js"
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data(){
			return{
				showLoad:false,
				list:[]
			}
		},
		components: {
			UniNavBar,Load
		},
		onLoad(){
			this.getNotice()
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType'
			])
		},
		methods: {
			...mapMutations(['setBulletin']),
			tapNavLeft() {pageback()},
			getNotic(item){
				if (!item.title) return;
				this.setBulletin(item);
				uni.navigateTo({
					url:`./bullentin`
				})
			},
			getNotice(){
				let url = this.getRequestUrl + '/api/User/notice';
				let data ={
					type:this.getLangType
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					this.showLoad = false;
					if(res.data.code){
						this.list = res.data.data;
						this.list.forEach(item=>{
							item.content = item.content
									  .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
									  .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
									  .replace(/<p>/ig, '<p class="p_class">')
									  .replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
							
						})
					}
				}).catch(err=>{
					this.showLoad = false;
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
@import '@/common/scss/variable.scss';
@import '@/common/scss/global.scss';
.app-message {
	.content {
		padding-left: 30upx;
		border-top: 1upx solid #E2E2E2;
		.li {
			height: 120upx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 60upx;
				height: 60upx;
				margin-right: 30upx;
			}
			.__content {
				border-bottom: 1upx solid #E2E2E2;
				height: 120upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				.title {
					font-size: 15px;
					color: #000000;
					font-weight: bold;
				}
				.txt {
					font-size: 11px;
					color: #5A5A5A;
					margin-top: 14upx;
					height: 18px;
					line-height: 18px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
